<nz-tabset>
  <nz-tab>
    <ng-template #nzTabHeading>
      Navigation
    </ng-template>
    <span>

      <br/>
      面包屑
      <br/>
      <nz-breadcrumb>
        <nz-breadcrumb-item>
          Home
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          Application Center
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          Application List
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          An Application
        </nz-breadcrumb-item>
      </nz-breadcrumb>

      <br/>
      分页
      <br/>
      <nz-pagination [nzPageIndex]="2" [nzTotal]="500" nzShowQuickJumper></nz-pagination>


    </span>
  </nz-tab>

  <nz-tab>
    <ng-template #nzTabHeading>
      提示信息
    </ng-template>
    <span>
      <button nz-button (click)="createMessage('success','成功')">显示成功提示</button>
      <button nz-button (click)="createMessage('error','报错')">显示报错提示</button>
      <button nz-button (click)="createMessage('warning','警告')">显示警告提示</button>


      <button nz-button [nzType]="'primary'" (click)="showModal()">
      <span>显示对话框</span>
    </button>
    <nz-modal [nzVisible]="isVisible" [nzTitle]="'第一个 Modal'" [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
      <ng-template #modalContent>
        <p>对话框的内容</p>
        <p>对话框的内容</p>
        <p>对话框的内容</p>
      </ng-template>
    </nz-modal>

      <br/>
      进度条
      <br/>
      <nz-progress [ngModel]="30"></nz-progress>
    <nz-progress [ngModel]="50" [nzStatus]="'active'"></nz-progress>
    <nz-progress [ngModel]="70" [nzStatus]="'exception'"></nz-progress>
    <nz-progress [ngModel]="100"></nz-progress>
    <nz-progress [ngModel]="50" [nzShowInfo]="false"></nz-progress>

    </span>
  </nz-tab>

  <nz-tab>
    <ng-template #nzTabHeading>
      数据实体
    </ng-template>
    <span>
      <br/>
      checkbox组
      <br/>

        <nz-checkbox-group [(ngModel)]="checkOptionsOne" (ngModelChange)="_log(checkOptionsOne)"></nz-checkbox-group>
  <br>
  <br>
  <nz-checkbox-group [(ngModel)]="checkOptionsTwo" (ngModelChange)="_log(checkOptionsTwo)"></nz-checkbox-group>
  <br>
  <br>
  <nz-checkbox-group [(ngModel)]="checkOptionsThree" (ngModelChange)="_log(checkOptionsThree)"></nz-checkbox-group>

      <br/>

      <br/>

    </span>
  </nz-tab>

  <nz-tab>
    <ng-template #nzTabHeading>
      下拉
    </ng-template>
    <span>
      <nz-dropdown>
      <a class="ant-dropdown-link" nz-dropdown>
        Hover me <i class="anticon anticon-down"></i>
      </a>
      <ul nz-menu>
        <li nz-menu-item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
        </li>
        <li nz-menu-item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">2nd menu item</a>
        </li>
        <li nz-menu-item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">3rd menu item</a>
        </li>
      </ul>
    </nz-dropdown>
    </span>
  </nz-tab>


  <nz-tab>
    <ng-template #nzTabHeading>
      跑马灯
    </ng-template>
    <span>

      <nz-carousel [nzAutoPlay]="true">
        <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>
    </span>
  </nz-tab>


  <nz-tab>
    <ng-template #nzTabHeading>
      卡片
    </ng-template>
    <span>

      <div style="background: #ECECEC;padding:30px;">
    <div nz-row [nzGutter]="8">
      <div nz-col [nzSpan]="8">
        <nz-card>
          <ng-template #title>
            Card title
          </ng-template>
          <ng-template #body>
            <p>Card content</p>
          </ng-template>
        </nz-card>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-card>
          <ng-template #title>
            Card title
          </ng-template>
          <ng-template #body>
            <p>Card content</p>
          </ng-template>
        </nz-card>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-card>
          <ng-template #title>
            Card title
          </ng-template>
          <ng-template #body>
            <p>Card content</p>
          </ng-template>
        </nz-card>
      </div>
    </div>
  </div>

    </span>
  </nz-tab>


</nz-tabset>




